<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <link rel="stylesheet" href="./1.css"> 
</head> 

<body> 
    <div class="zpb"> 
        <!-- 头部 -->
        <div class="zpbbox1"> 
            <header>
                <div class="left">
                    <div>警情警力</div> 
                    <div>警情警力</div>
                    <div>警情警力</div>
                    <div>警情警力</div>
                </div>
                <h2>舆情分析</h2>
                <div class="right">
                    <div>警情警力</div>
                    <div>警情警力</div>
                    <div>警情警力</div>
                    <div>警情警力</div>
                </div>
            </header>
        </div>
        <!-- 左边 -->
        <div class="zpbbox2">
            <div class="zpbleft">
                <div class="top">
                    <div class="topbox1">奥情分析</div>
                    <div class="topbox2">
                        <p>地区：西安</p> 2018/05/13
                    </div>
                    <div class="topbox3">
                        <div class="zpblefttopbox3-1">
                            <ul>
                                <li class="li1" style="background-color: #ff6c00;">灾难事故</li>
                                <li class="li2" style="background-color: #98f903;">投诉</li>
                                <li class="li3" style="background-color: #0078ff;">无效报应</li>
                                <li class="li4" style="background-color: yellow;">求助</li>
                                <li class="li5" style="background-color: #ac3ff2;">交</li>
                                <li class="li6" style="background-color:#629ee1;">刑</li>
                                <li class="li7" style="background-color: plum;"></li>
                                <li class="li8" style="background-color: blue;"></li>
                                <li class="li9" style="background-color: yellow;"></li>
                            </ul>
                        </div>
                        <div id="lefttitles">
                        
                        </div>
                    </div>
                </div>
                <div class="title">
                    <div class="topbox1">奥情区域分析</div>
                    <div class="topbox2">
                        <p>地区：西安</p> 时间：2018/05/13至2018-06-14
                    </div>
                    <div class="topbox3">
                        <div id="echartspie" style="width: 220px;height: 180px;"> </div>
                        <div id="lefttitle"> 
                             
                        </div> 
                    </div>
                </div>
                <div class="down"> 
                    <div class="topbox1">奥情环化分析</div>
                    <div class="topbox2">
                        <p>地区：西安</p> 时间：2018/05/13至2018-06-14
                    </div>
                    <div class="topbox3">
                        <div class="topbox3-1" id="echartsScatter"></div> 
                        <div class="topbox3-2">
                            <p style="color: white;font-size: 6px;">今日疫情总数</p>
                            <h2 style="color: plum;font-size: 10px;">54</h2>
                            <p>
                                <span style="color: skyblue;font-size: 6px;">环比</span>
                                <span> <img src="../舆情分析平台素材/img/iconup.png" alt=""> </span>
                                <span style="color: skyblue;font-size: 6px;">2%</span>
                            </p>

                            <p style="color: white;font-size: 6px;">今日疫情总数</p>
                            <h2 style="color: #1eafe5;font-size: 10px;">54</h2>
                            <p>
                                <span style="color: skyblue;font-size: 6px;">环比</span>
                                <span> <img src="../舆情分析平台素材/img/icondown.png" alt=""> </span>
                                <span style="color: skyblue;font-size: 6px;">3%</span>
                            </p>
                            <p style="color: white;font-size: 6px;">今日疫情总数</p>
                            <h2 style="color: yellow;font-size: 10px;">4</h2>
                            <p>
                                <span style="color: skyblue;font-size: 6px;">环比</span>
                                <span> <img src="../舆情分析平台素材/img/icondown.png" alt=""> </span>
                                <span style="color: skyblue;font-size: 6px;">3%</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中间 -->
            <div class="zpbtitle">
                <div class="top">
                    <div class="top1">
                        <header>今日奥情</header>
                        <div class="zpbtitletop">
                            <div>
                                <p style="color: white;font-size: 14px;">今日疫情总数</p> <br>
                                <h2 style="color: plum;font-size: 35px;">54</h2> <br>
                                <p>
                                    <span style="color: skyblue;">环比</span>
                                    <span> <img src="../舆情分析平台素材/img/iconup.png" alt=""> </span>
                                    <span style="color: skyblue;">2%</span>
                                </p>
                            </div>
                            <div>

                                <p style="color: white;font-size: 14px;">今日疫情总数</p> <br>
                                <h2 style="color: #1eafe5;font-size: 35px;">54</h2> <br>
                                <p>
                                    <span style="color: skyblue;">环比</span>
                                    <span> <img src="../舆情分析平台素材/img/icondown.png" alt=""> </span>
                                    <span style="color: skyblue;">3%</span>
                                </p>

                            </div>
                            <div>
                                <p style="color: white;font-size: 14px;">今日疫情总数</p> <br>
                                <h2 style="color: yellow;font-size: 35px;">4</h2> <br>
                                <p>
                                    <span style="color: skyblue;">环比</span>
                                    <span> <img src="../舆情分析平台素材/img/icondown.png" alt=""> </span>
                                    <span style="color: skyblue;">3%</span>
                                </p>
                            </div>
                            <div>
                                <p style="color: white;font-size: 14px;">今日疫情总数</p> <br>
                                <h2 style="color: plum;font-size: 35px;">54</h2> <br>
                                <p>
                                    <span style="color: skyblue;">环比</span>
                                    <span> <img src="../舆情分析平台素材/img/iconup.png" alt=""> </span>
                                    <span style="color: skyblue;">2%</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="top2">
                        <header>热门信息</header>
                        <div class="zpbtitletop2-1">
                            <div class="left">
                                <img src="../舆情分析平台素材/img/hot.png" alt="">
                            </div>
                            <div class="right">
                                <p>阿斯顿那是空啊大苏打喀什的间的哈桑啊实打实的</p>
                                <p>暗杀速度哈苏骄傲手段是丢</p>
                            </div>
                        </div>
                        <div class="zpbtitletop2-2">
                            <div class="left">
                                <img src="../舆情分析平台素材/img/hot.png" alt="">
                            </div>
                            <div class="right">
                                <p>阿斯顿那是空啊大苏打喀什的间的哈桑啊实打实的</p>
                                <p>暗杀速度哈苏骄傲手段是丢</p>
                            </div>
                        </div>

                        <div class="zpbtitletop2-1">
                            <div class="left">
                                <img src="../舆情分析平台素材/img/hot.png" alt="">
                            </div>
                            <div class="right">
                                <p>阿斯顿那是空啊大苏打喀什的间的哈桑啊实打实的</p>
                                <p>暗杀速度哈苏骄傲手段是丢</p>
                            </div>
                        </div>
                        <div class="zpbtitletop2-2">
                            <div class="left">
                                <img src="../舆情分析平台素材/img/hot.png" alt="">
                            </div>
                            <div class="right">
                                <p>阿斯顿那是空啊大苏打喀什的间的哈桑啊实打实的</p>
                                <p>暗杀速度哈苏骄傲手段是丢</p>
                            </div>
                        </div>
                        <div class="zpbtitletop2-1">
                            <div class="left">
                                <img src="../舆情分析平台素材/img/hot.png" alt="">
                            </div>
                            <div class="right">
                                <p>阿斯顿那是空啊大苏打喀什的间的哈桑啊实打实的</p>
                                <p>暗杀速度哈苏骄傲手段是丢</p>
                            </div>
                        </div>
                        <div class="zpbtitletop2-2">
                            <div class="left">
                                <img src="../舆情分析平台素材/img/hot.png" alt="">
                            </div>
                            <div class="right">
                                <p>阿斯顿那是空啊大苏打喀什的间的哈桑啊实打实的</p>
                                <p>暗杀速度哈苏骄傲手段是丢</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="down">
                    <div class="topbox1">奥情环化分析</div>
                    <div class="topbox2">
                        <p>地区：西安</p> 时间：2018/05/13至2018-06-14
                    </div>
                    <div class="topbox3">
                        <div class="topbox3-1" >
                            <div id="myechartsline" style="width: 300px;height: 140px;"></div>
                             
                        </div>
                        <div class="topbox3-2">
                            <p style="color: white;font-size: 16px;">今日疫情总数</p>
                            <h2 style="color: plum;font-size: 30px;">54</h2>
                            <p>
                                <span style="color: skyblue;">环比</span>
                                <span> <img src="../舆情分析平台素材/img/iconup.png" alt=""> </span>
                                <span style="color: skyblue;">2%</span>
                            </p>

                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边 -->
            <div class="zpbright"> 
                <div class="zpbrightbox1">
                    <header>疫情类别分析</header>
                    <p> <span>地区：西安</span> 时间：2018/05/13至2018-06-14</p>
                    <div id="min" style="width: 350px;height: 130px;">

                    </div>

                </div>
                <div class="zpbrightbox1">
                    <header>七日疫情类别分析</header>
                    <p> <span>地区：西安</span> 时间：2018/05/13至2018-06-14</p>
                    <div id="mins" style="width: 350px;height: 130px;">

                    </div>
                </div> 
                <div class="zpbrightbox1">
                    <header>矛盾纠纷一日数据分析</header>
                    <p> <span>地区：西安</span> 时间：2018/05/13至2018-06-14</p>
                    <div id="bing" style="width: 350px;height: 130px;">

                    </div>

                </div>
            </div>
        </div>
    </div>
</body>  
<script src="../../echarts.min.js"></script>   
</html>  
<script>
    //散点图 
    const myechartsScatterDom = echarts.init(document.querySelector("#echartsScatter"))
    const myechartsScatterDomoption = {
        xAxis: { 
            data: ['0', '10,000', '20,000', '30,000', '40,000', '50,000', '70,000']
        },
        grid: {   //距离x轴和y轴 
            x: 50,
            y: 50 
        },
        height: 55,
        series: {
            type: 'scatter',
            data: [55, 65, 70, 75, 80, 75, 83]
        }
    }
    myechartsScatterDom.setOption(myechartsScatterDomoption) 

     //左侧中间  康定县
    const myechartspieDom = echarts.init(document.querySelector("#echartspie")) 
    const echartspieoption = {
        polar:{
            center:[100,70],
            radius:[10,'60%']
        },
        radiusAxis:{
            max:4,
        },
        angleAxis:{
             type:'category',
             data:['甘孜县','炉霍县','白玉县','雅江县','康定市','康定市'],
        },
        series:{
             type:'bar',
             data:[1,1.2,2.4,3.6,2.8],
             coordinateSystem:'polar',
             label:{
                 show:true,
                 position:'middle',
                 formatter:'{b}:{c}'
             }
        },
        animation:false
    }
    myechartspieDom.setOption(echartspieoption)




    //左侧   网站  微博
    // var lefttitle = document.getElementById('lefttitle');
    // var myChart = echarts.init(lefttitle);
    // var lefttitle;
    // lefttitle = {
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //             type: 'shadow'
    //         }
    //     },
    //     legend: {},
    //     grid: {
    //         x:50,
    //         y:10,
    //     },
    //     xAxis: {   //x轴
    //         axisLable:{
    //              show:false
    //         },
    //         splitLine:{
    //              show:false
    //         }
    //     },
    //     height:100,
    //     yAxis: {   //y轴
    //         verticl:0,
    //         data: ['微博', '网站', '新闻', '贴吧', '讨论']
    //     },
    //     series: [
    //         {
    //             type: 'bar',
    //             center:['50%','50%'],
    //             itemStyle:{
    //                  color:'#39afa6'
    //             },
    //             barWidth:18,
    //             center:[500000,100000],
    //             data: [100, 239, 294, 970, 744, 30]
    //         },
    //     ]
    // };

    // lefttitle && myChart.setOption(lefttitle);



    // var lefttitles = document.getElementById('lefttitles');
    // var myChart = echarts.init(lefttitles);
    // var lefttitles;
    // lefttitles = {
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //             type: 'shadow'
    //         }
    //     },
    //     legend: {},
    //     grid: {
    //         x:50,
    //         y:10,
    //     },
    //     xAxis: {   //x轴
    //         axisLable:{
    //              show:false
    //         },
    //         splitLine:{
    //              show:false
    //         }
    //     },
    //     height:100,
    //     yAxis: {   //y轴
    //         verticl:0,
    //         data: ['微博', '网站', '新闻', '贴吧', '讨论']
    //     },
    //     series: [
    //         {
    //             type: 'bar',
    //             center:['50%','50%'],
    //             itemStyle:{
    //                  color:'#39afa6'
    //             },
    //             barWidth:18,
    //             center:[500000,100000],
    //             data: [100, 239, 294, 970, 744, 30]
    //         },
    //     ]
    // };

    // lefttitles && myChart.setOption(lefttitles);
    


    //中间下边   年份
//     const myechartslineDom=echarts.init(document.querySelector("#myechartsline"))
//       var option3={
//         tooltip: {
//             trigger: 'axis',
//             axisPointer: {
//             type: 'cross',
//             crossStyle: {
//                 color: '#999'
//             }
//             }
//         },
//         legend: {
//             data: ['2017年', '2018年', '同比增速'],
//             textStyle:{
//                 color:'white',
//             }
//         },
//         xAxis: [
//             {
//                 type: 'category',
//                 data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'],
//                 axisPointer: {
//                     type: 'shadow'
//                 },
//                 axisLabel:{
//                     textStyle:{
//                         color:"white"
//                     }
//                 },
//             }
//         ],
//         yAxis: [
//             {
//             type: 'value',
//             min: 0,
//             max: 250,
//             interval: 50,
//             axisLabel: {
//                 formatter: '{value} ml'
//             }
//             },
//             {
//             type: 'value',
//             min: 0,
//             max: 25,
//             interval: 5,
//             axisLabel: {
//                 formatter: '{value} °C'
//             }
//             }
//         ],
//         series: [
//             {
//             name: '2017年',
//             type: 'bar',
//             tooltip: {
//                 valueFormatter: function (value) {
//                 return value + ' ml';
//                 }
//             },
//             data: [
//                 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
//             ]
//             },
//             {
//             name: '2018年',
//             type: 'bar',
//             tooltip: {
//                 valueFormatter: function (value) {
//                 return value + ' ml';
//                 }
//             },
//             data: [
//                 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
//             ]
//             },
//             {
//             name: '同比增速',
//             type: 'line',
//             yAxisIndex: 1,
//             tooltip: {
//                 valueFormatter: function (value) {
//                 return value + ' °C';
//                 }
//             },
//             data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
//             }
//         ]
//     } 
//     myechartslineDom.setOption(option3) 








    // //右侧图一
    // const charDoms = echarts.init(document.querySelector("#min"))
    // const option = {
    //     //  legend:{
    //     //     //   top:'bottom'
    //     //  },
    //     toolbox: {
    //         show: true,
    //         feature: {
    //             mark: { show: true },
    //             DataView: { show: true, readOnly: false },
    //             restore: { show: true },
    //             saveAsImage: { show: false }
    //         }
    //     },
    //     series: [
    //         {
    //             //   name:''
    //             type: 'pie',
    //             radius: '50%',
    //             center: ['50%', '50%'],
    //             roseType: 'area',
    //             itemStyle: {
    //                 borderRadius: 0,
    //             },
    //             data: [
    //                 { value: 40, name: '社蒙' },
    //                 { value: 20, name: '社疆' },
    //                 { value: 70, name: '社军' },
    //                 { value: 100, name: '社恐' },
    //                 { value: 20, name: '社藏' },
    //                 { value: 80, name: '社隐' },
    //                 { value: 80, name: '社警' },
    //             ]
    //         }
    //     ]
    // }
    // charDoms.setOption(option)


    // //右侧图二
    // const charDomss = echarts.init(document.querySelector("#mins"))
    // const optionss = {
    //     xAxis: {
    //         // type: 'category',
    //         data: ['6-08', '6-09', '6-10', '6-11', '6-12', '6-13', '6-14']
    //     },
    //     grid:{
    //         x:50,
    //         y:30,
    //     },
    //     yAxis: {
    //         // type: 'value'
    //         min:0,
    //         max:250,
    //     },
    //     height:70,
    //     series: [
    //         {
    //             data: [120, 140, 100, 145, 95, 230, 200],
    //             type: 'line',
    //             color:'pink',
    //             areaStyle:{
    //                  color:"pink"
    //             }
    //         }
    //     ]
    // }
    // charDomss.setOption(optionss)

    // // 右侧图三
    // const charDom = echarts.init(document.querySelector("#bing"))
    // console.log(charDom)
    // const options = {
    //     tooltip: {   //提示
    //         trigger: 'item'
    //     },
    //     legend: {
    //         left: 'center',
    //         textStyle: {
    //             color: '#fff'
    //         },
    //     },
    //     series: [
    //         {
    //             type: 'pie',
    //             radius: '50%',
    //             data: [
    //                 {
    //                     name: '境内',
    //                     value: 200,
    //                 },
    //                 {
    //                     name: '境外',
    //                     value: 160
    //                 }
    //             ],
    //             emphasis: {
    //                 itemStyle: {
    //                     shadowBlur: 10,
    //                     shadowOffsetX: 0,
    //                     shadowColor: 'raba(0,0,0,0.5)'
    //                 }
    //             }
    //         }
    //     ]
    // }
    // charDom.setOption(options)


</script>